<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IconComboBox - 1.4.3</title>

<link rel="stylesheet" type="text/css" href="../theme-remote.css" />
<style type="text/css">
body {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 11px;
}

#debugPanel pre {
    font-family: "Lucida Console", "Courier New", Courier, monospace;
}

div.container {
    border: 0px solid green;
    margin: 10px;
}
</style>

<script type="text/javascript">
var djConfig = {
    isDebug: true,
    parseOnLoad: true,
    locale: "zh",
    extraLocale: ["en"],
    baseUrl: "../script/dojo-1.4.3/dojo/",
    modulePaths: {
        "demo": "../../../script/demo",
        "com": "../../../script/com"
    }
};
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.4.3/dojo/dojo.xd.js.uncompressed.js"></script>
<script type="text/javascript" src="../script/dojo-require.js"></script>
<script type="text/javascript">
    dojo.require("demo.widget.IconComboBox");
</script>
<script type="text/javascript" src="../script/utils.js"></script>
<script type="text/javascript">
function debug(messages) {
    var msg = demo.utils._getDebugMsg.apply(null, arguments);
    console.debug(msg);

    var msgDiv = dojo.byId("debugPanelContent");
    msgDiv.innerHTML = msg;
}

function append(messages) {
    var msg = demo.utils._getDebugMsg.apply(null, arguments);

    var msgDiv = dojo.byId("debugPanelContent");
    msgDiv.innerHTML += "\n" + msg;
}

function show(id) {
    demo.utils.show(id);
}

function hide(id) {
    demo.utils.hide(id);
}
</script>
<style type="text/css">
@import "../css/rounded-button.css";
@import "../css/rounded-corners.css";

body {
    padding: 10px;
}

.iconLabel {
    margin-right: 2px;
    width: 1.8em;
    height: 1.8em;
    line-height: 1.8em;
    text-align: center;
    font-family: "Georgia";
    font-weight: bold;
    background-color: #ccc;
}

.iconM {
    background-color: #FFCC33;
}

.iconC {
    background-color: #33CCFF;
}

.iconL {
    background-color: #66FF33;
}
</style>
<script type="text/javascript">
function getIconLabel(item, store) {
    var name = store.getValue(item, 'name', '');
    var index = name.length % 4;
    var label = '';

    switch(index) {
    case 0:
        label = 'L';
        break;
    case 1:
        label = 'M';
        break;
    case 2:
        label = 'C';
        break;
    default:
        label = 'D';
    }

    return label;
}

function getIconLabelClass(item, store) {
    var name = store.getValue(item, 'name', '');
    var index = name.length % 4;
    var iconClass = '';

    switch(index) {
    case 0:
        iconClass = 'iconL';
        break;
    case 1:
        iconClass = 'iconM';
        break;
    case 2:
        iconClass = 'iconC';
        break;
    default:
        iconClass = '';
    }

    return 'iconLabel ' + iconClass;
}

function getIconClass(item, store) {
    var name = store.getValue(item, 'name', '');
    var iconClass = (name.length % 2 === 0) ? 'dijitEditorIconBold' : 'dijitEditorIconItalic';
    return 'dijitEditorIcon ' + iconClass;
}

//////////////////////////////
dojo.ready(function() {
    dojo.byId('version').innerHTML = 'Version ' + dojo.version;

    debug('loaded');
});

//////////////////////////////

</script>
</head>
<body class="tundra">

  <h2 id="version">Unknown Version</h2>

  <div id="main" class="container">

    <div id="titlePanel" dojoType="dijit.TitlePane" title="Panel" style="">
      <div id="resizablePanel" style="position:relative; padding: 10px; border:1px solid black;">

        <!-- Content -->
        <div class="content">
          <div jsId="stateStore" dojoType="dojo.data.ItemFileReadStore" url="../data/states.json"></div>
          <p>
            <strong>Limitations of ComboBox:</strong><br />
            1. ComboBox prior to Dojo 1.6.0 has a defect of not highlighting all matches in highlight=all mode.<br />
            2. When set lableType=html, we can add icon HTML in labelFunc(), but it won't do highlight anymore.<br />
          </p>
          <label for="combobox">ComboBox:</label>
          <input id="combobox" dojoType="dijit.form.ComboBox"
              autoComplete="false"
              hasDownArrow="true"
              highlightMatch="all"
              ignoreCase="true"
              labelType="text"
              name="productName"
              queryExpr="*${0}*"
              required="true"
              searchAttr="name"
              selectOnClick="false"
              store="stateStore"
              title="Product name"
              placeHolder="Enter a product name."
              promptMessage="Please enter a product name."
              invalidMessage="Invalid product name."
              value=""
              style="width: 200px" />
          <hr />
          <p>
            <strong>Enhancements of IconComboBox:</strong><br />
            1. Added iconClass(item, store) function - to display customized icons for options in dropdown list.<br />
            2. Fixed the defect of not highlighting all matches in highlight=all mode for ComboBox prior to Dojo 1.6.0.<br />
            3. TODO: validation with tooltip error message.<br />
          </p>
          <label for="iconcombobox">IconComboBox:</label>
          <input id="iconcombobox" dojoType="demo.widget.IconComboBox"
              autoComplete="false"
              hasDownArrow="false"
              highlightMatch="all"
              iconClass="getIconLabelClass"
              iconLabel="getIconLabel"
              ignoreCase="true"
              labelType="text"
              name="productName"
              queryExpr="*${0}*"
              required="true"
              searchAttr="name"
              selectOnClick="false"
              store="stateStore"
              title="Product name"
              placeHolder="Enter a product name."
              promptMessage="Please enter a product name."
              invalidMessage="Invalid product name."
              value=""
              style="width: 200px" />
        </div>

        <!-- Resize Handle -->
        <div id="resizeHandle" dojoType="dojox.layout.ResizeHandle" targetId="resizablePanel"></div>
      </div>
    </div>

    <!-- Button Panel -->
    <div dojoType="dojo.dnd.Moveable">
      <div id="buttonPanel" dojoType="dijit.TitlePane" title="Button Panel" style="">
        <!-- Button -->
        <button dojoType="dijit.form.Button" title="Click to show popup dialog" onClick="dijit.byId('dialog').show();">Show Popup</button>

        <!-- DropDown Button -->
        <button dojoType="dijit.form.DropDownButton" title="Click to show TooltipDialog">
          <span>DropDownButton with TooltipDialog</span>
          <!-- TooltipDialog -->
          <div dojoType="dijit.TooltipDialog">
            <label for="name">Name:</label>
            <input dojoType="dijit.form.TextBox" id="name" name="name" />
            <br />
            <div dojoType="dijit.form.Button" type="submit" title="Save">Save</div>
          </div>
        </button>

        <button dojoType="dijit.form.DropDownButton" title="Click to show Menu">
          <span>DropDownButton with Menu</span>
          <!-- Menu -->
          <div dojoType="dijit.Menu" id="menu" style="display: none;">
            <div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconCut" onClick="alert('Cut!')">Cut</div>
            <div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconCopy" onClick="alert('Copy!')">Copy</div>
            <div dojoType="dijit.MenuSeparator"></div>
            <div dojoType="dijit.PopupMenuItem">
              <span>Popup ColorPalette</span>
              <div dojoType="dijit.ColorPalette"></div>
            </div>
          </div>
        </button>
      </div>
    </div>
  </div>

  <!-- Debug Panel -->
  <div id="debugPanel" dojoType="dojox.layout.FloatingPane" title="Console" resizable="true" dockable="true" style="position: absolute; bottom: 20px; right: 20px; width: 500px; height: 150px;">
    <pre id="debugPanelContent"></pre>
  </div>

  <!-- Popup Dialog -->
  <div dojoType="dijit.Dialog" id="dialog" title="Dialog" style="display: none;">
    <button id="okButton" dojoType="dijit.form.Button" title="OK"  onClick="alert('OK!');">OK</button>
    <button id="cancelButton" dojoType="dijit.form.Button" title="Cancel" onClick="dijit.byId('dialog').hide();">Cancel</button>
  </div>

  <!-- Toaster -->
  <div dojoType="dojox.widget.Toaster" id="toaster" positionDirection="br-up" messageTopic="toasterMessageTopic"></div>
</body>
</html>
